<template>
  <div ref="chart" style="width: 100%; height: 500px"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-gl'

export default {
  name: 'ChinaMap3D',
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    const chartDom = this.$refs.chart
    console.log(echarts);
    const chart = echarts.init(chartDom)

    // 配置3D地图的基本信息
    chart.setOption({
      series: [{
        type: 'map3D',
        map: 'china',
        roam: true,
        label: {
          show: true,
          textStyle: {
            fontSize: 16,
            color: '#fff',
            backgroundColor: 'rgba(0,0,0,0.5)'
          }
        },
        itemStyle: {
          areaColor: '#0052ff',
          opacity: 0.8,
          borderWidth: 1,
          borderColor: '#fff',
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            textStyle: {
              fontSize: 16,
              color: '#fff',
              backgroundColor: 'rgba(0,0,0,0.5)'
            }
          },
          itemStyle: {
            areaColor: '#0066ff',
            opacity: 1
          }
        }
      }]
    })

    // 窗口大小调整时自适应
    window.addEventListener('resize', () => {
      chart.resize()
    })
  }
}
</script>

<style scoped>
/* 可选：添加样式以控制组件的外观 */
</style>
